<template>
  <div class="absolute inset-0 flex flex-col items-center justify-center">
    <!-- 顶部遮罩 -->
    <div class="w-full bg-transparent bg-opacity-0 flex-1"></div>

    <!-- 中间扫描区域 -->
    <div class="w-full flex">
      <!-- 左侧遮罩 -->
      <div class="bg-transparent bg-opacity-0 flex-1"></div>

      <!-- 扫描方框 -->
      <div class="relative w-64 h-64">
        <!-- 四个角的方框 -->
        <div
          class="absolute top-0 left-0 w-8 h-8 border-l-4 border-t-4 border-green-500"
        ></div>
        <div
          class="absolute top-0 right-0 w-8 h-8 border-r-4 border-t-4 border-green-500"
        ></div>
        <div
          class="absolute bottom-0 left-0 w-8 h-8 border-l-4 border-b-4 border-green-500"
        ></div>
        <div
          class="absolute bottom-0 right-0 w-8 h-8 border-r-4 border-b-4 border-green-500"
        ></div>
        <!-- 扫描线动画 -->
        <div
          class="scan-line absolute top-0 left-0 w-full h-0.5 bg-gradient-to-r from-transparent via-green-500 to-transparent animate-scan shadow-green-500 shadow-sm"
        ></div>
      </div>

      <!-- 右侧遮罩 -->
      <div class="bg-transparent bg-opacity-0 flex-1"></div>
    </div>

    <!-- 底部遮罩和提示 -->
    <div
      class="w-full bg-transparent bg-opacity-0 flex-1 flex flex-col justify-start pt-10"
    >
      <p class="text-white text-base text-center drop-shadow-lg">{{ tipText }}</p>
    </div>

    <!-- 关闭按钮 -->
    <div
      class="absolute top-8 right-8 w-11 h-11 bg-black bg-opacity-60 rounded-full flex items-center justify-center cursor-pointer transition-colors duration-300 hover:bg-opacity-80 active:scale-95"
      @click="handleClose"
    >
      <svg
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M18 6L6 18M6 6L18 18"
          stroke="white"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  tipText?: string;
}

interface Emits {
  (e: "close"): void;
}

const props = withDefaults(defineProps<Props>(), {
  tipText: "将二维码放入框内，即可自动扫描",
});

const emit = defineEmits<Emits>();

function handleClose() {
  emit("close");
}
</script>

<style scoped>
/* 扫描线动画 */
@keyframes scan {
  0% {
    top: 0;
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

.animate-scan {
  animation: scan 2s ease-in-out infinite;
}
</style>
